<template>
  <div class="filename-input-wrapper">
    <input
      type="text"
      :value="modelValue"
      class="filename-input"
      :placeholder="placeholder"
      @input="handleInput"
      :title="title"
    />
    <button
      v-if="modelValue && showClearButton"
      class="clear-filename-button"
      @click="handleClear"
      title="清空文件名"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        width="12"
        height="12"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        stroke-width="2"
        stroke-linecap="round"
        stroke-linejoin="round"
      >
        <line x1="18" y1="6" x2="6" y2="18"></line>
        <line x1="6" y1="6" x2="18" y2="18"></line>
      </svg>
    </button>
  </div>
</template>

<script lang="ts">
export default {
  name: 'FileNameInput',
  props: {
    modelValue: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '文件名',
    },
    title: {
      type: String,
      default: '设置文件名',
    },
    showClearButton: {
      type: Boolean,
      default: true,
    },
  },
  emits: ['update:modelValue'],
  methods: {
    handleInput(event: Event) {
      const target = event.target as HTMLInputElement
      this.$emit('update:modelValue', target.value)
    },
    handleClear() {
      this.$emit('update:modelValue', '')
    },
  },
}
</script>

<style scoped>
.filename-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.filename-input {
  font-size: 13px;
  padding: 4px 24px 4px 8px;
  border-radius: 4px;
  height: 28px;
  box-sizing: border-box;
  outline: none;
  transition: all 0.2s ease;
  background-color: white;
  border: 1px solid #e2e8f0;
  color: #334155;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  width: 140px;
}

.filename-input:hover {
  border-color: #cbd5e1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.filename-input:focus {
  border-color: #3b82f6;
  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* 文件名清除按钮样式 */
.clear-filename-button {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: #94a3b8;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.clear-filename-button:hover {
  color: #64748b;
  background-color: #f1f5f9;
}

/* 暗色主题下的文件名输入框样式 */
.dark-toolbar .filename-input {
  background-color: #1e293b;
  border-color: #475569;
  color: #f1f5f9;
}

.dark-toolbar .filename-input:hover {
  border-color: #64748b;
}

.dark-toolbar .filename-input:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);
}

.dark-toolbar .clear-filename-button {
  color: #64748b;
}

.dark-toolbar .clear-filename-button:hover {
  color: #94a3b8;
  background-color: #334155;
}

/* 响应式样式 */
@media (max-width: 768px) {
  .filename-input {
    width: 120px;
  }
}

@media (max-width: 480px) {
  .filename-input {
    width: 100px;
  }
}
</style>
